<template>
    <div class="footer-nav">
      <router-link to="/" class="nav-item" active-class="active">
        <i class="fas fa-home"></i>
        <span>🎉</span>
        <span>推荐</span>
      </router-link>
      <router-link to="/activities" class="nav-item" active-class="active">
        <i class="fas fa-list"></i>
        <span>📖</span>
        <span>活动</span>
      </router-link>
      <router-link to="/hot" class="nav-item" active-class="active">
        <i class="fas fa-fire"></i>
        <span>🔥</span>
        <span>热点</span>
      </router-link>
      <router-link to="/profile" class="nav-item" active-class="active">
        <i class="fas fa-user"></i>
        <span>🏠</span>
        <span>我的</span>
      </router-link>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FooterNav'
  }
  </script>
  
  <style>
  .footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #999;
    transition: color 0.2s;
  }
  
  .nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
  }
  
  .nav-item.active {
    color: #4CAF50;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .footer-nav {
      padding: 8px 0;
    }
    
    .nav-item i {
      font-size: 16px;
    }
    
    .nav-item span {
      font-size: 10px;
    }
  }
  </style>
  